<template>
  <el-row class="main">
    <el-col :span="6">
      <div id="left1"></div>
      <div id="left2"></div>
    </el-col>
    <el-col :span="12">
      <div id="middle3">
        <el-card class="card1">转化率:87.8%</el-card>
        <el-card class="card1">访客:8798</el-card>
        <el-card class="card1">收益:328.8</el-card>
      </div>
      <div id="middle4"></div>
    </el-col>
    <el-col :span="6">
      <div id="right5"></div>
      <div id="right6"></div>
    </el-col>
  </el-row>
</template>

<script>
import echarts from "echarts";
// 引入地图
import 'echarts/lib/chart/map';
// 引入js
import 'echarts/map/js/china.js';

export default {
  name: "Backendbaseecharts",
  mounted() {
    this.getEcharts1()
    this.getEcharts2()
    this.getEcharts4()
    this.getEcharts5()
    this.getEcharts6()
  },
  methods: {
    //生成左上图
    getEcharts1() {
      let lineCharts = echarts.init(document.getElementById('left1'));
      lineCharts.setOption({
        xAxis: {
          show: false,
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          show: false,
          type: 'value'
        },
        series: [
          {
            data: [155, 230, 224, 218, 135, 147, 260],
            type: 'line',
            itemStyle: {
              opacity: 0
            },
            lineStyle: {
              color: 'orange'
            },
            smooth: 0.3,
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: 'orange' // 0% 处的颜色
                }, {
                  offset: 1, color: '#fff' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            }
          }
        ],
        grid: {
          left: 0,
          right: 0,
          top: 0,
          bottom: 20
        },
      })
    },
    //生成左下图
    getEcharts2() {
      var myChart2 = echarts.init(document.getElementById('left2'));
      myChart2.setOption({
        tooltip: {
          trigger: 'item',
          formatter: "{b} : {c} ({d}%)",
        },
        legend: {
          top: '-100%',
          left: 'center'
        },
        color: ['#45C2E0', '#C1EBDD', '#FFC851', '#5A5476', '#1869A0', '#FF9393'],
        series: [
          {
            type: 'pie',
            radius: ['40%', '55%'], // 图形大小：1调大小，2调粗细
            center: ["30%", "50%"], // 1左，2上，
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '12',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {name: '北京', value: 1048},
              {name: '浙江', value: 735,},
              {name: '辽宁', value: 580,},
              {name: '吉林', value: 484,},
              {name: '四川', value: 300,}
            ],
          }
        ]
      })
    },
    // 生成中国地图
    getEcharts4() {
      //方式一：*********************************************************************************
      // let myEcharts = echarts.init(document.getElementById("middle4"));
      // let option = {
      //   title: {  //标题样式
      //     text: '中国地图',
      //     x: "center",
      //     textStyle: {
      //       fontSize: 18,
      //       color: "black"
      //     },
      //   },
      //   tooltip: {
      //     trigger: 'item',
      //     formatter: function (params) {
      //       console.log(params)
      //       if (params.name) {
      //         return params.name + ' : ' + (isNaN(params.value) ? 0 : parseInt(params.value));
      //       }
      //     }
      //   },
      //   visualMap: {//视觉映射组件
      //     top: 'bottom',
      //     left: 'left',
      //     min: 10,
      //     max: 500000,
      //     //text: ['High', 'Low'],
      //     realtime: true,  //拖拽时，是否实时更新
      //     calculable: true,  //是否显示拖拽用的手柄
      //     inRange: {
      //       color: ['lightskyblue', 'yellow', 'orangered']
      //     }
      //   },
      //   series: [
      //     {
      //       name: '模拟数据',
      //       type: 'map',
      //       mapType: 'china',
      //       roam: false,//是否开启鼠标缩放和平移漫游
      //       itemStyle: {//地图区域的多边形 图形样式
      //         normal: {//是图形在默认状态下的样式
      //           label: {
      //             show: true,//是否显示标签
      //             textStyle: {
      //               color: "black"
      //             }
      //           }
      //         },
      //         zoom: 1,  //地图缩放比例,默认为1
      //         emphasis: {//是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
      //           label: {show: true}
      //         }
      //       },
      //       top: "3%",//组件距离容器的距离
      //       data: [
      //         {name: '北京', value: 350000},
      //         {name: '天津', value: 120000},
      //         {name: '上海', value: 300000},
      //         {name: '重庆', value: 92000},
      //         {name: '河北', value: 25000},
      //         {name: '河南', value: 20000},
      //         {name: '云南', value: 500},
      //         {name: '辽宁', value: 3050},
      //         {name: '黑龙江', value: 80000},
      //         {name: '湖南', value: 2000},
      //         {name: '安徽', value: 24580},
      //         {name: '山东', value: 40629},
      //         {name: '新疆', value: 36981},
      //         {name: '江苏', value: 13569},
      //         {name: '浙江', value: 24956},
      //         {name: '江西', value: 15194},
      //         {name: '湖北', value: 41398},
      //         {name: '广西', value: 41150},
      //         {name: '甘肃', value: 17630},
      //         {name: '山西', value: 27370},
      //         {name: '内蒙古', value: 27370},
      //         {name: '陕西', value: 97208},
      //         {name: '吉林', value: 88290},
      //         {name: '福建', value: 19978},
      //         {name: '贵州', value: 94485},
      //         {name: '广东', value: 89426},
      //         {name: '青海', value: 35484},
      //         {name: '西藏', value: 97413},
      //         {name: '四川', value: 54161},
      //         {name: '宁夏', value: 56515},
      //         {name: '海南', value: 54871},
      //         {name: '台湾', value: 48544},
      //         {name: '香港', value: 49474},
      //         {name: '澳门', value: 34594}
      //       ]
      //     }
      //   ]
      // };
      // 使用刚指定的配置项和数据显示图表。
      // myEcharts.setOption(option);
      //**********************************************************************************
      let myChart = echarts.init(document.getElementById('middle4'));
      let option = {
        // geo配置详解： https://echarts.baidu.com/option.html#geo
        geo: {
          zoom: 1.1, //缩放比列
          map: 'china',
          show: true,
          roam: false, //禁止让地图缩放，滑动
          top: 20,
          // bottom:0,
          label: {
            normal: {
              show: true,
              textStyle: {
                color: 'rgba(255,255,255,2)',
                fontSize: 9
              }
            },
            emphasis: {
              show: true, //地图显示省份
            }
          },
          itemStyle: {
            normal: {
              areaColor: 'black',
              borderColor: 'rgb(255,255,255,1)', //地图边缘颜色
              shadowColor: 'red',
            },
          },
        },
        series: [
          {
            name: '', // 浮动框的标题（上面的formatter自定义了提示框数据，所以这里可不写）
            type: 'map',
          }
        ]
      };
      myChart.setOption(option);
    },
    // 生成右上图
    getEcharts5() {
      var myChart5 = echarts.init(document.getElementById('right5'))
      myChart5.setOption({
        tooltip: {
          trigger: 'axis',
          // y轴虚线显示
          axisPointer: {
            type: 'cross',
            label: {
              fontSize: 10,
              backgroundColor: '#696969'
            }
          },
        },

        grid: {
          left: '3%',
          right: '1%',
          bottom: '10%',
          // top: '30%',
          containLabel: true,
          height: "80%"
        },
        xAxis: {

          type: 'category',
          boundaryGap: true,//开启留白政策
          splitLine: {
            show: false
          },
          axisLine: {
            symbol: ['none', 'arrow'],//添加x轴的箭头
            // axisLine:{show:false},
            symbolSize: [7, 10],// 轴线两端箭头大小，数值一表示宽度，数值二表示高度
            lineStyle: {
              // type: 'solid',
              color: 'rgba(220,220,220,0.3)',//x轴的轴线的颜色
              // width:'2',//坐标线的宽度
            }
          },
          axisLabel: {
            show: true,
            showMaxLabel: false,//隐藏最右边那个箭头
            textStyle: {
              fontSize: '10',
              color: '#fff'
            }
          },
          data: ['北京', '浙江', '辽宁', '湖北', '福建', '吉林', '山东', '四川', ''],
        },

        yAxis: {

          axisTick: {
            show: false
          },
          splitLine: {
            show: false,
          },
          axisLine: {
            show: false,  //去除y轴轴线
            lineStyle: {
              type: 'solid',
              color: '#fff',//左边线的颜色
              width: '2',//坐标线的宽度
            }
          },
          // 修改y轴字体大小
          axisLabel: {
            textStyle: {
              fontSize: '10'
            }
          },
          type: 'value',

        },
        series: [
          {
            name: '1月',
            color: '#6495ED',
            data: [513, 222, 456, 350, 744, 600, 354, 255],
            type: 'line',
            smooth: true,
            areaStyle: {color: '#4169E1'},
            //显示一月数据
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  color: '#ffffff',
                  fontSize: 10
                }
              }
            }
          },
          {
            name: '2月',
            color: '#FFC0CB',
            data: [673, 354, 358, 462, 658, 498, 547, 456],
            type: 'line',
            smooth: true,
            areaStyle: {color: '#FFC0CB'}, //填充色
            //显示图形每个节点数据
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  fontSize: 10,
                  color: '#ffffff',
                }
              }
            }
          }
        ]
      })
    },
    // 生成右下图
    getEcharts6() {
      var myChart6 = echarts.init(document.getElementById('right6'))
      myChart6.setOption({
        title: {
          text: 'xxxx',
          subtext: 'xxx',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              {value: 1048},
              {value: 735},
              {value: 580},
              {value: 484},
              {value: 300}
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    }
  }
}
</script>

<style scoped>
.main {
  background-color: #999;
}

#left1 {
  /*background-color: #42b983;*/
  height: 200px;
}

#left2 {
  /*background-color: red;*/
  height: 200px;
}

#middle3 {
  /*background-color: blueviolet;*/
  height: 100px;
  display: flex;
}

.card1 {
  background-color: orange;
  border: 0px;
  border-radius: 5px;
  width: 30%;
  height: 80%;
  font-size: 20px;
  text-align: center;
  flex: 1;
  margin: 10px 10px;
}

.card1:hover {
  transform: scale(1.1);
  transition: all 0.5s;
}

#middle4 {
  /*background-color: yellowgreen;*/
  height: 300px;
}

#right5 {
  /*background-color: #42b983;*/
  height: 200px;
}

#right6 {
  /*background-color: red;*/
  height: 200px;
}

</style>